<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件值传递的高级用法</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">父组件的count：{{count}}</div>
			<counter-show v-model:count="count" v-model:msg="msg"></counter-show>
			<!-- <input type="text"  v-model="count"/> -->
		</div>
	</body>
</html>
<script>
	// 局部组件
	const CounterShow = {
		props:['count','msg'],
		mounted(){
			console.log(this.msg);
		},
		methods:{
			changeCount(){
				this.$emit('update:count',this.count+1);
				this.$emit('update:msg',this.msg + '?');
			}
		},
		template:
			`<div @click="changeCount">
				子组件计数器：{{count}}
			</div>
			<div>
				{{msg}}
			</div>`
	}
	// 父组件
	const app = Vue.createApp({
		components:{
			"counter-show":CounterShow
		},
		methods:{
			
		},
		data() {
			return{
				count:20,
				msg:'提示：你确定当前操作吗？'
			}
		}
	});
	const vm = app.mount("#app")
</script>